import React, { useState, useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import {HomeOutlined,
  ReadOutlined,
  ProfileOutlined,
  MessageOutlined,
  UserOutlined} from '@ant-design/icons';
import './Tale.css'

export default function Tale() {
  const navigate = useNavigate()
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const menuRef = useRef(null);
  const [drawerOpen, setDrawerOpen] = useState(false);

  // 响应式状态
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  const isMobile = windowSize.width < 768;
  const isTablet = windowSize.width >= 768 && windowSize.width < 1024;
  const isDesktop = windowSize.width >= 1024;

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
    setDrawerOpen(!drawerOpen);
  };

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setIsMenuOpen(false);
      }
    };

    if (isMenuOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isMenuOpen]);

  // 导航函数
  const handleCilkeadd = () => navigate("./zhibohome");
  const handleCilkeAid = () => navigate("./chatAi");
  const handlCilkeJiu = () => navigate("./angil");
  const handleClikeBook = () => navigate("./bookct");
  const handleCilkeserver = () => navigate("./chatroom");
  const handleClikBood = () => navigate("./tale");

  const [activeTab, setActiveTab] = useState('/');
  const tabItems = [
    { icon: <HomeOutlined />, label: "首页", path: "/" },
    { icon: <ProfileOutlined />, label: "课程", path: "/a" },
    { icon: <ReadOutlined />, label: "图书", path: "/b" },
    { icon: <MessageOutlined />, label: "聊天", path: "/c" },
    { icon: <UserOutlined />, label: "我的", path: "/d" }
  ];

  return (
    <div className="tale-container">
      {/* 图片区域 */}
      <section className="image-section" style={{ marginTop: '0' }}>
        <div className="image-container">
          <img src="/image/4.webp" alt="智绘师故事" className="main-image" />
        </div>
      </section>

      {/* 我们的故事卡片 */}
      <section className="our-story-section">
        {/* 模糊背景 - 手写字的场景 */}
        <div className="our-story-background"></div>
        
        {/* 白色卡片 */}
        <div className="our-story-card">
          {/* 我们的故事标题 */}
          <h1 className="our-story-title">
            我们的故事
          </h1>
          
          {/* 分隔线 */}
          <div className="our-story-divider"></div>

          {/* 故事卡片容器 */}
          <div className="story-cards-container">
            {/* 第一个故事卡片 */}
            <div className="story-card">
              {/* 左侧图片 */}
              <div className="story-card-image">
                <img 
                  src="/image/4.webp" 
                  alt="科学少年" 
                />
              </div>

              {/* 右侧内容 */}
              <div className="story-card-content">
                <h3 className="story-card-title">
                  科学少年成长记: 13岁的小孩儿哥竟然是天文化石小达人
                </h3>
                <p className="story-card-description">
                  他用望远镜探索宇宙的奥秘,用小锤子敲开史前的秘密。13岁的他,卧室藏着无尽的科学秘密...
                </p>
                <div className="story-card-link">
                  <span>
                    去了解 ›
                  </span>
                </div>
              </div>
            </div>

            {/* 第二个故事卡片 */}
            <div className="story-card">
              {/* 左侧图片 */}
              <div className="story-card-image">
                <img 
                  src="/image/4.webp" 
                  alt="科学少年" 
                />
              </div>

              {/* 右侧内容 */}
              <div className="story-card-content">
                <h3 className="story-card-title">
                  科学少年成长记: 拥有杨利伟签名的小孩儿哥如何玩转科学实验
                </h3>
                <p className="story-card-description">
                  从火箭模型到太空探索,这个13岁的小科学家用实验证明梦想的力量...
                </p>
                <div className="story-card-link">
                  <span>
                    去了解 ›
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 移动端底部导航栏 */}
      {(isMobile || isTablet) && (
        <div style={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          backgroundColor: 'white',
          borderTop: '1px solid #eee',
          padding: '0.5rem 0',
          zIndex: 1000
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
            {tabItems.map((item) => (
              <div 
                key={item.path} 
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  padding: '0.5rem',
                  cursor: 'pointer',
                  color: activeTab === item.path ? '#667eea' : '#666'
                }}
                onClick={() => {
                  setActiveTab(item.path);
                  navigate(item.path);
                }}
              >
                <span style={{ fontSize: '1.2rem', marginBottom: '2px' }}>{item.icon}</span>
                <span style={{ fontSize: '0.7rem' }}>{item.label}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}
